<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加分类按钮 -->
    <el-button type="primary" @click="addDialog">添加分类</el-button>
    <tree-table
      :data="getCart"
      :columns="defaultProps"
      :selection-type="false"
      :expand-type="false"
      index-text="#"
      :show-row-hover="false"
      show-index
      border
    >
      <!-- 是否有效 -->
      <template slot="isok" slot-scope="scope">
        <i
          class="el-icon-success"
          style="color: lightgreen"
          v-if="scope.row.cat_deleted === false"
        ></i>
      </template>
      <!-- 一级二级菜单 -->
      <template slot="sorts" slot-scope="scope">
        <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
        <el-tag type="success" v-if="scope.row.cat_level === 1">二级</el-tag>
        <el-tag type="warning" v-if="scope.row.cat_level === 2">三级</el-tag>
      </template>
      <!-- 操作 -->
      <template slot="caozuo" slot-scope="scope">
        <el-button type="primary" size="mini" @click="Editdialog(scope.row)"
          >编辑</el-button
        >
        <el-button type="danger" size="mini" @click="delCate(scope.row)"
          >删除</el-button
        >
      </template>
    </tree-table>

    <!-- 添加分类 弹出框-->
    <el-dialog title="添加分类" :visible.sync="dialogAddVisible">
      <el-form ref="form" :model="Cartform" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="Cartform.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <el-cascader
            v-model="Cartform.cat_pid"
            :options="getCart1"
            :props="addCart"
            clearable
          ></el-cascader>
        </el-form-item>
        {{ Cartform }}
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCarts">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage1"
      :page-sizes="[5, 10, 15, 30, 100]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 编辑分类 -->
    <el-dialog title="编辑分类" :visible.sync="dialogEditVisible">
      <el-form ref="form" :model="Editform" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="Editform.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="EditCarts">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getCat, addcategories, deleteCarts, EditCarts,EditCartOK } from "@/http/Goods";
export default {
  data() {
    return {
      // data中的数据
      defaultProps: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          // 表示当前列为模板列
          type: "template",
          // 表示当前这一列的模板名称
          template: "isok",
        },
        {
          label: "分类等级",
          type: "template",
          template: "sorts",
        },
        {
          label: "操作",
          type: "template",
          template: "caozuo",
        },
      ],
      getCart: [{}],
      getCart1: [{}],
      dialogAddVisible: false,
      Cartform: {
        cat_name: "",
        cat_pid: "", //父级id 不能为空，如果要添加1级分类，则父分类Id应该设置为  `0`
        cat_level: "", //分类层级 不能为空，`0`表示一级分类；`1`表示二级分类；`2`表示三级分类
      },
      addCart: {
        label: "cat_name",
        value: "cat_id",
        checkStrictly: true,
      },
      // 分页总条数
      currentPage1: 5,
      total: 0,
      page: {
        pagenum: 1,
        pagesize: 5,
      },
      // 编辑分类
      Editform: {
        cat_name: "",
        id:0
      },
      dialogEditVisible: false,
    };
  },
  methods: {
    // 所有数据--------
    async getCartfn() {
      let res = await getCat({
        pagenum: this.page.pagenum,
        pagesize: this.page.pagesize,
      });
      console.log(res);
      this.getCart = res.data.result;
      this.total = res.data.total;
    },
    // 添加分类需要重新请求不然父级分类里面只会有当前每一页里面的内容--------
    async addDialog() {
      this.dialogAddVisible = true;
      let res = await getCat();
      console.log(res);
      this.getCart1 = res.data;
    },
    async addCarts() {
      let length = this.Cartform.cat_pid.length;
      let cat_pid = length === 0 ? 0 : this.Cartform.cat_pid[length - 1];
      let cat_level = length === 0 ? 0 : length;
      console.log(cat_pid);
      console.log(length);
      let res = await addcategories({
        cat_name: this.Cartform.cat_name,
        cat_pid: cat_pid,
        cat_level,
      });
      this.dialogAddVisible = false;
      this.getCartfn();
      console.log(res);
    },
    // 分页的两个函数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pagesize = val;
      this.getCartfn();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.pagenum = val;
      this.getCartfn();
    },
    // 删除商品
    async delCate(val) {
      console.log(val.cat_id);
      let res = await deleteCarts(val.cat_id);
      console.log(res);
      this.getCartfn();
    },
    // 编辑分类
    async Editdialog(val) {
      let res = await EditCarts(val.cat_id);
      console.log(val.cat_id);
      console.log(res);
      this.dialogEditVisible = true;
      this.Editform.id=res.data.cat_id
      this.Editform.cat_name = res.data.cat_name;
    },
     async EditCarts() {
       let res = await EditCartOK(this.Editform)
       console.log(res);
       this.getCartfn()
       this.dialogEditVisible = false;
    },
  },
  created() {
    this.getCartfn();
  },
};
</script>
<style>
.el-button {
  margin: 10px 0;
}
.el-cascader-panel {
  height: 300px;
}
</style>